Page({

  /**
   * 页面的初始数据
   */
  data: {
    houseList: [], //房屋list
    show: false,
    type: '', //当前选中的房屋item
    width: 0, //当前选中的尺寸
    height: 0, //当前选中的尺寸
    scale: 0,
    name: '', //当前选中的房间的尺寸
    homeName: '新房子',
    rpxRatio: 1,
    colorData: {
      hueData: {
        colorStopRed: 255,
        colorStopGreen: 0,
        colorStopBlue: 0,
      },
      pickerData: {
        x: 0,
        y: 480,
        red: 0,
        green: 0,
        blue: 0,
        bgColor: '#000000'
      },
      bgColor: '',
      barY: 0,
      // 提交数组
      submit: []
    },
    isColorPickerVisible: false, //颜色修改
    edit: false, //是否开启编辑
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let index = options.houseIndex
    if (index != undefined) {
      let houseList = (wx.getStorageSync('houseList'))[index]
      console.log(houseList);
      this.setData({
        houseList: houseList.houseData
      })
    }

  },


  onChangeColor(e) {
    console.log(e);
    const {
      red,
      green,
      blue,
      hex
    } = e.detail.colorData.pickerData;
    // console.log(bgColor)
    this.setData({
      bgColor: hex
    });
  },


  // 当color-picker失去焦点时触发
  hideColorPicker() {
    const {
      targetInput
    } = this.data;
    const newData = {};
    newData[targetInput] = this.data.bgColor;
    this.setData(newData);
    this.setData({
      isColorPickerVisible: false
    });
  },

  showColorPicker(e) {
    console.log(e)
    let targetInput = e.currentTarget.dataset.param;
    this.setData({
      isColorPickerVisible: true,
      targetInput: targetInput
    });
  },


  // 拖拽组件
  changView(e) {
    console.log(e);
    let index = e.target.dataset.index
    let x = e.detail.x
    let y = e.detail.y
    let houseList = this.data.houseList
    houseList[index].x = x
    houseList[index].y = y
    this.setData({
      houseList: houseList
    })
  },

  //缩放组件
  scaleView(e) {
    console.log(e);
    let index = e.target.dataset.index
    let scale = e.detail.scale
    let x = e.detail.x
    let y = e.detail.y
    let houseList = this.data.houseList
    houseList[index].scale = scale
    houseList[index].x = x
    houseList[index].y = y
    this.setData({
      houseList: houseList
    })
  },

  // 添加组件
  addHouseItem() {
    let type = this.data.type
    let name = this.data.name
    let houseList = this.data.houseList
    let width = this.data.width || 0
    let height = this.data.height || 0
    let bgColor = this.data.bgColor || 0
    houseList.push({
      name: name,
      x: 10,
      y: 220,
      type: type,
      scaleValue: 1,
      width: width,
      height: height,
      bgColor: bgColor
    })
    // console.log(houseList);
    this.setData({
      houseList: houseList
    })
    this.onClose()

  },

  // 房间名字修改
  editHomeName: function (event) {
    let value = event.detail.value
    wx.setNavigationBarTitle({
      title: value
    })
    this.setData({
      homeName: value
    })
  },

  // 关闭popup
  onClose() {
    this.setData({
      show: false
    });
  },

  // 手动输入颜色
  inputColor(e) {
    let value = e.detail.value
    this.setData({
      bgColor: value
    })
  },

  // 开启颜色组件
  choiceColor() {
    this.setData({
      isColorPickerVisible: true
    });
  },

  // 关闭颜色组件
  onColorClose() {
    this.setData({
      isColorPickerVisible: false
    });
  },

  // 点击组件
  onHouseItem(e) {
    console.log(e);
    let type = e.detail.type
    let obj = e.detail.size || {}
    if (!e.detail.size) {
      this.setData({
        type: type
      })
      this.addHouseItem()
      return
    }
    // console.log(obj);
    this.setData({
      show: true,
      isColorPickerVisible: false,
      type: type,
      width: obj.hasOwnProperty('width') ? obj.width : -1,
      height: obj.hasOwnProperty('height') ? obj.height : -1,
      name: obj.hasOwnProperty('name') ? obj.name : '无名',
      bgColor: obj.hasOwnProperty('bgColor') ? obj.bgColor : '',
    })
  },

  // 组件点击修改
  editHouseItem(e) {
    console.log(e);
    let type = e.detail.type
    let index = e.target.dataset.index
    // let houseList = this.data.houseList
    let size = e.detail.size
    // 使用 Object.keys 获取对象的所有键名
    Object.keys(size).forEach(key => {
      this.setData({
        [key]: size[key]
      });
    });
    this.setData({
      index: index,
      type: type,
      edit: true,
      show: true,
    })
  },



  // 组件尺寸修改预备
  houseItemSize(e) {
    console.log(e);
    let value = e.detail.value
    let size = e.target.dataset.size
    if (size == 'width') {
      this.setData({
        width: value
      })
    } else if (size == 'height') {
      this.setData({
        height: value
      })
    } else if (size == 'scale') {
      this.setData({
        scale: value
      })
    } else if (size == 'name') {
      this.setData({
        name: value
      })
    } else if (size == 'bgColor') {
      this.setData({
        bgColor: value
      })
      // this.setData({
      //   isColorPickerVisible: true
      // })
    }
  },

  // 保存组件修改数据
  editHouseItemSave() {
    console.log("222");
    let {
      height,
      bgColor,
      name,
      scale,
      width,
      index,
      houseList
    } = this.data
    houseList[index].height = height;
    houseList[index].bgColor = bgColor;
    houseList[index].name = name;
    houseList[index].scale = scale;
    houseList[index].width = width;
    this.setData({
      houseList: houseList,
      edit:false
    })
    this.onClose()
  },

  // 置顶组件
  topHouseItem() {
    let {index,houseList} = this.data
    // 确保index是有效的
    if (index >= 0 && index < houseList.length) {
      // 移除指定索引的元素
      const removedItem = houseList.splice(index, 1)[0];
      // 将移除的元素添加到数组末尾
      houseList.push(removedItem);
      this.setData({
        houseList:houseList,
        edit:false
      })
      this.onClose()
    } else {
      console.error('Invalid index or houseList is not an array.');
    }
  },

  // 删除已选中的房子
  delHouseItem() {
    let {index,houseList} = this.data
    // 确保index是有效的
    if (index >= 0 && index < houseList.length) {
      // 移除指定索引的元素
      houseList.splice(index, 1)[0];
      this.setData({
        houseList:houseList,
        edit:false
      })
      this.onClose()
    } else {
      console.error('Invalid index or houseList is not an array.');
    }
  },

  // 保存房子
  saveHome() {
    let houseList = this.data.houseList
    let storageHouseList = wx.getStorageSync('houseList')
    let obj = {
      houseName: this.data.homeName,
      houseData: houseList
    }
    if (!storageHouseList) {
      storageHouseList = []
    }
    storageHouseList.push(obj)
    wx.setStorageSync('houseList', storageHouseList)
    wx.navigateTo({
      url: '../houseList/houseList',
    })
  },

  goHomeList() {
    wx.navigateTo({
      url: '../houseList/houseList',
    })
  }
})